<template>
  <div>
    <el-form v-loading="loadingBtn.diaSubmitBtn" :model="addForm" ref="addForm" :rules="addFormRule" class="system-form"
             :label-width="formLabelWidth">
      <el-form-item label="账户名" prop="acc">
        <el-input v-model="addForm.acc"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="addForm.pwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="addForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="nick">
        <el-input v-model="addForm.nick"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="number">
        <el-input v-model="addForm.number"></el-input>
      </el-form-item>
      <el-form-item label="E-mail" prop="mail">
        <el-input v-model="addForm.mail"></el-input>
      </el-form-item>
      <el-form-item class="system-form-btnGroup">
        <el-button icon="el-icon-position" type="primary" @click="submitForm('addForm')"
                   :loading="loadingBtn.diaSubmitBtn">提交
        </el-button>
        <el-button icon="el-icon-refresh-left" @click="resetForm('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { insert, selectOne, update } from '@/api/system/account'
import { validText, validPhone } from '@/common/validate/formValidate'

export default {
  data () {
    return {
      loadingBtn: {
        diaSubmitBtn: false
      },
      isEdit: false,
      addForm: {
        acc: '',
        pwd: '',
        checkPass: '',
        nick: '',
        number: '',
        mail: ''
      },
      addFormRule: {
        acc: [
          { required: true, message: '请填写账号名', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validText, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.validatePass2, trigger: 'blur' }
        ],
        nick: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请填写电话号码', trigger: 'blur' },
          { validator: validPhone, trigger: 'blur' }
        ],
        mail: [
          { required: false }
        ]
      },
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  methods: {
    validatePass2 (rule, value, callback) {
      if (this.addForm.pwd && value !== this.addForm.pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    },
    /**
     * 提交按钮
     * @param formName
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingBtn.diaSubmitBtn = true
          if (this.isEdit) {
            update(this.addForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          } else {
            insert(this.addForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.$refs[formName].resetFields()
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * 重置按钮
     * @param formName
     */
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    getUserInfo (id) {
      selectOne(id).then(({ data, code }) => {
        if (code === this.$constant.SUCCESS) {
          this.addForm = { ...this.addForm, ...data }
        }
      })
    }
  },
  created () {
    const isEdit = this.$route.query.pageFlag === 'edit'
    if (isEdit) {
      this.isEdit = isEdit
      this.getUserInfo(this.$route.query.id)
      this.addFormRule = {
        acc: [
          { required: true, message: '请填写账号名', trigger: 'blur' }
        ],
        checkPass: [
          { validator: this.validatePass2, trigger: 'blur' }
        ],
        nick: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        number: [
          { required: false }
        ],
        mail: [
          { required: false }
        ]
      }
    }
  }
}
</script>

<style scoped>
</style>
